import {designPage, reactive} from "plain-design-composition";
import {DemoRow} from "../../Demo/DemoRow";
import DATA from "../../../data/data-1.json";
import {$message, Adc, AdcGroup, AdcOperation, AntdTable, Checkbox, Form, FormItem, InputNumber, OuterOperation, Radio, RadioGroup, Segment, SegmentGroup, Switch} from "../../../../packages";
import {iAdcTableOperation} from "../../../../packages/components/AntdTable/adc/standard/AdcOperation.utils";
import {Alert} from "antd";
import {iAdtCellRenderScope, iAdtNode} from "../../../../packages/components/AntdTable/utils/antd-table.utils";

export const demo1 = designPage(() => {

  const data = DATA.slice(0, 3);

  const operations: iAdcTableOperation[] = [
    { label: '复制', position: 'inner', handler: ({ row }) => {$message(`复制：` + row.name);} },
    { label: '删除', position: 'inner', handler: ({ row }) => {$message(`删除：` + row.name);} },
    { label: '自定义渲染', position: 'inner', render: ({ row }) => <span key="custom" onClick={() => console.log('自定义渲染:' + row.name)}>[{row.name}]</span> },
  ];

  return () => (
    <DemoRow title="基本用法">
      <AntdTable dataSource={data}>
        <Adc dataIndex="id" title="编号"/>
        <Adc dataIndex="name" title="名称"/>
        <Adc dataIndex="date" title="日期(order=6)" order={6}/>
        <Adc dataIndex="color" title="颜色"/>
        <Adc dataIndex="star" title="评分"/>
        <AdcOperation operations={operations}/>
      </AntdTable>
    </DemoRow>
  );
});

export const demo2 = designPage(() => {

  const data = DATA.slice(0, 3);

  const operations: iAdcTableOperation[] = [
    { label: '复制', position: 'inner', handler: ({ row }) => {$message(`复制：` + row.name);} },
    { label: '删除', position: 'inner', handler: ({ row }) => {$message(`删除：` + row.name);}, show: ({ row }) => !!row.star && row.star > 4 },
  ];

  return () => (
    <DemoRow title="动态显示的按钮">
      <Alert message="删除按钮评分小于4则隐藏" style={{ marginBottom: '12px' }}/>
      <AntdTable dataSource={data}>
        <Adc dataIndex="id" title="编号"/>
        <Adc dataIndex="name" title="名称"/>
        <Adc dataIndex="date" title="日期(order=6)" order={6}/>
        <Adc dataIndex="color" title="颜色"/>
        <Adc dataIndex="star" title="评分"/>
        <AdcOperation operations={operations}/>
      </AntdTable>
    </DemoRow>
  );
});

export const demo3 = designPage(() => {

  const data = DATA.slice(0, 3);

  const operations: iAdcTableOperation[] = [
    { label: '复制', position: 'inner', handler: ({ row }) => {$message(`复制：` + row.name);} },
    { label: '删除', position: 'inner', handler: ({ row }) => {$message(`删除：` + row.name);}, disabled: ({ row }) => !row.star || row.star < 4 },
  ];

  return () => (
    <DemoRow title="动态禁用的按钮">
      <Alert message="删除按钮评分小于4则禁用" style={{ marginBottom: '12px' }}/>
      <AntdTable dataSource={data}>
        <Adc dataIndex="id" title="编号"/>
        <Adc dataIndex="name" title="名称"/>
        <Adc dataIndex="date" title="日期(order=6)" order={6}/>
        <Adc dataIndex="color" title="颜色"/>
        <Adc dataIndex="star" title="评分"/>
        <AdcOperation operations={operations}/>
      </AntdTable>
    </DemoRow>
  );
});

export const demo4 = designPage(() => {

  const data = DATA.slice(0, 10);

  const operations: iAdcTableOperation[] = [
    { label: '复制', position: 'inner', handler: ({ row }) => {$message(`复制：` + row.name);} },
    { label: '删除', position: 'inner', handler: ({ row }) => {$message(`删除：` + row.name);}, show: ({ row }) => !!row.star && row.star > 4 },
    { label: '订阅', position: 'inner', handler: ({ row }) => {$message(`订阅：` + row.name);}, show: ({ row }) => !!row.star && row.star > 3 },
    { label: '收藏', position: 'inner', handler: ({ row }) => {$message(`收藏：` + row.name);}, show: ({ row }) => !!row.star && row.star > 2 },
    { label: '发布', position: 'inner', handler: ({ row }) => {$message(`发布：` + row.name);}, show: ({ row }) => !!row.star && row.star > 1 },
  ];

  return () => (
    <DemoRow title="按钮自动折叠">
      <AntdTable dataSource={data}>
        <Adc dataIndex="id" title="编号"/>
        <Adc dataIndex="name" title="名称"/>
        <Adc dataIndex="date" title="日期(order=6)" order={6}/>
        <Adc dataIndex="color" title="颜色"/>
        <Adc dataIndex="star" title="评分"/>
        <AdcOperation operations={operations}/>
      </AntdTable>
    </DemoRow>
  );
});

export const demo10 = designPage(() => {

  const state = reactive({
    data: DATA,
    size: undefined as any,
    summaryData: [
      {
        "id": 0,
        "color": "#79f285",
        "name": "Lisa",
        "date": "2002-04-28",
        "star": "★★★★★★★",
        "size": 49
      },
      {
        "id": 1,
        "color": "#f27990",
        "name": "George",
        "date": "2019-01-06",
        "star": "★★★★★★★★",
        "size": 74
      },
    ],
    other: {
      hasSummaryData: true,
      groupHead: false,
    },
    props: {
      headRowHeight: undefined,
      bodyRowHeight: undefined,
      bordered: false,
      virtual: true,
    },
    plc: {
      width: 200,
      align: 'left' as any,
      init: true,
      order: 5,
      hide: undefined,
    },
    editNode: null as null | iAdtNode,
    onDblclickCell: ({ node }: iAdtCellRenderScope) => {
      console.log('node', node);
      if (!!state.editNode) {
        if (node === state.editNode) {
          // node.saveEdit();
          // node.closeEdit();
          state.editNode = null;
          return;
        } else {
          // state.editNode.cancelEdit();
        }
      }

      // node.enableEdit();
      state.editNode = node;
    },
  });

  const operations: iAdcTableOperation[] = [
    {
      label: '外部按钮一',
      handler: () => {
        $message('外部按钮一');
      },
    },
    {
      label: '外部按钮二',
      handler: () => {
        $message('外部按钮二');
      },
    },
    {
      label: '复制',
      position: 'inner',
      handler: ({ row }) => {
        $message('复制' + row.name);
      },
    },
    {
      label: '删除',
      position: 'inner',
      handler: ({ row }) => {
        $message('删除' + row.name);
      },
    },
    {
      label: '发布',
      position: 'inner',
      handler: ({ row }) => {
        $message('发布' + row.name);
      },
    },
    {
      label: '订阅',
      position: 'inner',
      handler: ({ row }) => {
        $message('订阅' + row.name);
      },
    },
    {
      label: '收藏',
      position: 'inner',
      handler: ({ row }) => {
        $message('收藏' + row.name);
      },
    },
  ];

  return () => (
    <DemoRow title={'切换列'}>
      <Form column={3}>
        <FormItem label={'列宽度响应测试'}>
          <InputNumber v-model={state.plc.width} step={100}/>
        </FormItem>
        <FormItem label="表头行高" disabled>
          <InputNumber v-model={state.props.headRowHeight} step={5}/>
        </FormItem>
        <FormItem label="表体行高" disabled>
          <InputNumber v-model={state.props.bodyRowHeight} step={5}/>
        </FormItem>
        <FormItem label="列销毁测试(名称)">
          <Switch v-model={state.plc.init}/>
        </FormItem>
        {/*<FormItem label="大小尺寸">
          <SegmentGroup v-model={state.size}>
            <Segment label="Mini" val="mini"/>
            <Segment label="Small" val="small"/>
            <Segment label="Normal" val="normal"/>
            <Segment label="Large" val="large"/>
          </SegmentGroup>
        </FormItem>*/}
        <FormItem label="文本对齐方式">
          <RadioGroup v-model={state.plc.align}>
            <Radio label="left" val="left"/>
            <Radio label="center" val="center"/>
            <Radio label="right" val="right"/>
          </RadioGroup>
        </FormItem>
        <FormItem label="带边框">
          <Checkbox v-model={state.props.bordered}/>
        </FormItem>
        {/*<FormItem label="合计行">
          <Switch v-model={state.other.hasSummaryData}/>
        </FormItem>*/}
        <FormItem label="表头分组">
          <Switch v-model={state.other.groupHead}/>
        </FormItem>
        {/*<FormItem label="启用虚拟滚动">
          <Switch v-model={state.props.virtual}/>
        </FormItem>*/}
        {!state.other.groupHead && <>
          <FormItem label="order(名称)">
            <InputNumber v-model={state.plc.order}/>
          </FormItem>
          <FormItem label="hide:(评分)">
            <Switch v-model={state.plc.hide}/>
          </FormItem>
        </>}
      </Form>
      <OuterOperation operations={operations}/>
      <AntdTable
        dataSource={state.data}
        onCellDoubleClick={state.onDblclickCell}
        {...state.props}
        size={state.size}
        showRows={10}
      >

        {!!state.other.groupHead && <>
          <Adc title={'普通文本列'} dataIndex={'id'}/>
          <Adc title={'设置宽度'} dataIndex={'id'} width={state.plc.width} align={state.plc.align}/>
          <Adc title={'大小'} dataIndex={'size'} align={state.plc.align}/>
          <AdcGroup title="联系方式">
            <Adc title={'地址'} dataIndex={'addr'} align={state.plc.align}/>
            <Adc title={'链接'} dataIndex={'url'} align={state.plc.align}/>
          </AdcGroup>
          <AdcGroup title={'地址'}>
            <Adc dataIndex="date" title="日期" align={state.plc.align}/>
            {!!state.plc.init && <Adc dataIndex="name" title="名称" align={state.plc.align}/>}
            <Adc dataIndex="color" title="颜色" align={state.plc.align}/>
          </AdcGroup>
        </>}
        {!state.other.groupHead && <>
          <Adc dataIndex="id" title="编号"/>
          <Adc dataIndex="name" title="名称" width={state.plc.width}/>
          <Adc dataIndex="id" title="编号(order=4)" order={4} align={state.plc.align}/>
          <Adc dataIndex="size" title="大小" align={state.plc.align}/>
          {!!state.plc.init && <Adc dataIndex="name" title="名称" order={state.plc.order} align={state.plc.align}/>}
          <Adc dataIndex="date" title="日期(order=6)" order={6} align={state.plc.align}/>
          <Adc dataIndex="color" title="颜色" align={state.plc.align}/>
          <Adc dataIndex="star" title="评分" hide={state.plc.hide} align={state.plc.align}/>
        </>}
        <AdcOperation operations={operations}/>
      </AntdTable>
    </DemoRow>
  );
});
